<template>
    <div>
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-fold">首页</el-breadcrumb-item>
                <el-breadcrumb-item>账户管理</el-breadcrumb-item>
                <el-breadcrumb-item>账户查询</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!--表头导航栏模块-->
        <div>
            <el-form
                    ref="form"
                    :inline="true"
                    :model="formInline"
                    class="demo-form-inline">
                <el-form-item label="条件查找" prop="aUid">
                    <el-input v-model="formInline.aUid" placeholder="用户标识"></el-input>
                </el-form-item>
                <el-form-item prop="aName">
                    <el-input v-model="formInline.aName" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item prop="aIdcar">
                    <el-input v-model="formInline.aIdcar" placeholder="身份证"></el-input>
                </el-form-item>
                <el-form-item prop="aMobile">
                    <el-input v-model="formInline.aMobile" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary" @click="queryAccount">查询</el-button>
                    <el-button icon="el-icon-delete"  @click="noQuery">清空</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--主体内容模块-->
        <div>
            <el-table
                    :data="AccountList"
                    border
                    :row-style="selectedstyle"
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="aContractStartTime"
                        label="签约日期"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="aUid"
                        label="用户标识"
                        width="260">
                </el-table-column>
                <el-table-column
                        prop="aName"
                        label="姓名"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="aMobile"
                        label="手机号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="aIdcar"
                        label="身份证"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="aProductName"
                        label="使用产品"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="aCreditLimit"
                        label="信用额度"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="aUsedLimit"
                        label="已用额度"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="aDebtMoney"
                        label="欠款金额"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="aDebtCapita"
                        label="欠款本金"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="aDebtInterest"
                        label="利息"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="aInvestorName"
                        label="资方名称"
                        width="120">
                </el-table-column>


                <el-table-column
                        prop="aDebtCapita"
                        label="还款日"
                        width="120">
                </el-table-column>

                <el-table-column
                    prop="aContractEndTime"
                    label="合同结束时间"
                    width="120">
                </el-table-column>

                <el-table-column
                        prop="aCreditInvestigationStatus"
                        label="征信状态"
                        width="120"
                        :formatter="aCreditInvestigationStatustype">
                </el-table-column>
                <el-table-column
                        prop="aContractStatus"
                        label="合同状态"
                        width="120"
                        :formatter="aContractStatustype">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row.aUid)" size="small" type="warning" round>查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页模块-->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[10,20,30]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Account",
        data(){
            return{
                formInline:{
                    aUid:"",
                    aName:"",
                    aMobile:"",
                    aIdcar:""
                },
                AccountList:[],
                pageNum: 1,
                pageSize: 10,
                total:0,//共多少条
            }
        },
        methods:{
            //根据信息来渲染不同的布局属性
            selectedstyle ({row, rowIndex}) {
                if(row.aContractStatus==1){
                    return {
                        "background-color": "#ABEA7F"
                    };
                }else if(row.rRepaymentStatus==0){
                    return {
                        "background-color": "#C9C5C8"
                    };
                }
            },
            aCreditInvestigationStatustype(row, column, cellValue) {
                if (cellValue == 1) {
                    return '资方上报征信';
                } else if (cellValue == 0) {
                    return '资方未上报征信';
                }
            },
            aContractStatustype(row, column, cellValue) {
                if (cellValue == 0) {
                    return '风控拒绝';
                } else if (cellValue == 1) {
                    return '合同期';
                }
            },
            queryAccount(){
                let  url =this.$baseUrl+"ananger/showAll"
                this.$axios.get(url,{
                    params:{
                        aName:this.formInline.aName,
                        aMobile:this.formInline.aMobile,
                        aIdcar:this.formInline.aIdcar,
                        aUid:this.formInline.aUid,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    }
                }).then(res=>{
                    if (res.data.code == 200){
                        this.AccountList = res.data.data.list;
                        this.pageNum = res.data.data.pageNum;
                        this.pageSize = res.data.data.pageSize;
                        this.total = res.data.data.total
                    }else {
                        this.$alert("查询失败!")
                    }
                })
            },
            noQuery(){
                this.$refs.form.resetFields()
            },
            handleSizeChange(size){
                this.pageSize = size;
                this.queryAccount();
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.queryAccount();
            },
            handleClick(aUid) {
                this.$router.push("/accountmanager/"+aUid);
                console.log(aUid);
            }

        },
        created(){
            this.queryAccount();
        }
    }
</script>

<style scoped>

</style>